<template>
	<div class="user">
		<div class="search">
			<!-- <HyForm
				:formItems="formItems"
				:labelWidth="labelWidth"
				:itemStyle="itemStyle"
			></HyForm> -->
			<PageSearch
				:searchFormConfig="searchFormConfig"
				@resetBtnClick="handleResetClick"
				@queryBtnClick="handleQueryClick"
			></PageSearch>
		</div>
		<div class="content">
			<PageContent
				@newBtnClick="handleNewData"
				@editBtnClick="handleEditData"
				:contentTableConfig="contentTableConfig"
				pageName="user"
				ref="pageContentRef"
			></PageContent>
		</div>
		<PageModal
			ref="pageModalRef"
			:modalConfig="modalConfigRef"
			:defaultInfo="defaultInfo"
      pageName="user"
			destroy-on-close
		></PageModal>
	</div>
</template>

<script lang="ts">
	import { defineComponent ,computed} from 'vue'

	import PageSearch from '@/components/page-search'
	import PageContent from '@/components/page-content'
	import PageModal from '@/components/page-modal'

	import { searchFormConfig } from '@/views/main/system/user/config/search.config'
	import { contentTableConfig } from './config/content.config'
	import { modalConfig } from './config/modal.config'

	import { usePageSearch } from '@/hooks/usePageSearch'
	import { usePageModal } from '@/hooks/use-page-modal'
	import { useStore } from '@/store'
	export default defineComponent({
		name: 'user',
		components: {
			PageSearch,
			PageContent,
			PageModal
		},
		setup() {
			const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
			//pageModal相关的hook逻辑
			const newCallBack = () => {
				const passwordItem = modalConfig.formItems.find((item) => {
					return item.field === 'password'
				})

				passwordItem!.isHidden = false
			}
			const editCallBack = () => {
				const passwordItem = modalConfig.formItems.find((item) => {
					return item.field === 'password'
				})
				passwordItem!.isHidden = true
			}

			const store = useStore()
      const modalConfigRef = computed(()=>{
        const departmentItem = modalConfig.formItems.find((item) => {
				return item.field === 'departmentId'
			})
			if (departmentItem) {
				departmentItem.options = store.state.entireDepartment.map((item) => {
					return { title: item.name, value: item.id }
				})
			}

      const roleItem = modalConfig.formItems.find((item) => {
				return item.field === 'roleId'
			})
			if (roleItem) {
				roleItem.options = store.state.entireRole.map((item) => {
					return { title: item.name, value: item.id }
				})
			}
        return modalConfig
      })


			const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
				usePageModal(newCallBack, editCallBack)
			return {
				searchFormConfig,
				contentTableConfig,
				pageContentRef,
				pageModalRef,
				handleResetClick,
				handleQueryClick,
				modalConfigRef,
				handleNewData,
				handleEditData,
				defaultInfo
			}
		}
	})
</script>

<style scoped lang="less">
	.content {
		border-top: 20px solid #f5f5f5;
		padding: 20px;
	}
</style>
